<!DOCTYPE HTML>
<html>
	
	<head>

		<meta charset="UTF-8">
		<title>RIGHT, R-Interactive-Graphics-via-HTml</title>
		
		<link  rel="stylesheet" href="right.css"> 
		
	
		
	</head>
	
	
	<body>
	
	
	<div id="head">
		<div class="wrap">
			<h1><a id="mainTitle" href="right_index.html">RIGHT</a></h1>
		<!-- <h2>designed by <a href="#">RIGHT</a></h2>-->
			<div id="nav">
				<ul>
					<li><a href="right_index.html">Home</a></li>
					<li><a href="about.html">About</a></li>
					<li><a href="#">Tutorial</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
		</div>
	</div>
	
	
		<div id="right">
			<h1>About RIGHT</h1>
			<p>Learn more about RIGHT chart... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ... ...</p>
			<h1>Recent Works</h1>
				<ul>
					<li><a href="#">A Scatter Chart</a></li>
					<li><a href="#">A Histogram Chart</a></li>
					<li><a href="#">A Box-and-Whisker Chart</a></li>
					<li><a href="#">A Chart</a></li>
					<li><a href="#">A Chart</a></li>
				</ul>
		</div>			
	
<!-- <input type="radio" value="2" name="ex" id="radio1" /><label for="radio1">IE, FF </label><br />  -->	
	
		
	<script src="kinetic-v4.3.1.js"></script>

	
	
	<div id="content">		
		<div style="margin: 5px 5px 5px 5px; float:left; border:1px solid black; width: 500px;">
			<h1>1. Scatter</h1>
			<div id="scatterContainer" style="width: graphWidth; position : relative; border:1px solid black; background:  #eeeeee;" oncontextmenu="return false;" ></div>
		</div>
		<div style="margin: 5px 5px 5px 5px; float:left; border:1px solid black; width: 500px;">
			<h1>2. Histogram</h1>	
			<div id="histContainer" style="width: graphWidth; position : relative; border:1px solid black; background:  #eeeeee;; " oncontextmenu="return false;"></div>
		</div>
		<div style="margin: 5px 5px 5px 5px; float:left; border:1px solid black; width: 500px; height: 500px;">
			<h1>3. Box-and-Whisker</h1>
			<div id="boxContainer" style="width: graphWidth; position : relative; border:1px solid black; background:  #eeeeee;; " oncontextmenu="return false;"></div>		
		</div>
		<div style="margin: 5px 5px 5px 5px; float:left; border:1px solid black; width: 500px; height: 500px;">
			<h1>4. ????????</h1>
		</div>
		<h1>------------------------------------------------------------------------------------------------------------------</h1>
		
		<!--  input type="text" id="histDiffTextBox" style="width: 50px; top:320px;position:absolute;" placeholder="Diff"  onkeydown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {histDiffUpdate(); return false;}};"/>   	 -->
	</div>	
	
	<script src="common.js"> </script>
	
	<script>//
		/////////////// Create Main structure from CSV file ///////////

	//	createMainStructure("diamonds-from-R.csv");			
		createMainStructure("Theoph-from-R.csv");
		//////////variables for scatter chart//////////////// names are likely to change later
		
		var radius_scale = 4; // / Dot radius in scatter chart
		var scatterX = 3;	//[scatterX]th column data
		var scatterY = 4;	//[scatterY]th column data
		var scatterXLabel = labelArr[scatterX];
		var scatterYLabel = labelArr[scatterY];
		var scatterXMain =  mainArr[scatterX];
		var scatterYMain = mainArr[scatterY];
		
		var scatterColor = mainArr[0];
		var legend = true;
//		var scatterColor = 'default';
//		var legend = false;
		
		var scatterXMax=findMaxValue(scatterXMain,0); //나중에 max함수 추가해서 5단위로 잡게 만들기.
		var scatterYMax=findMaxValue(scatterYMain,0);
		var scatterXDiff=parseInt(scatterXMax/5);//나중에 자동으로 잡아주기.
		var scatterYDiff=parseInt(scatterYMax/6);
		//////////variables for histogram chart//////////////// names are likely to change later
		
		var histX = 3; //[histX]th column data
		var histXLabel = labelArr[histX];
		var histXMain =  mainArr[histX];
		
		var diffHist = 2;
		var histXMax=findMaxValue(histXMain,diffHist); //나중에 max함수 추가해서 5단위로 잡게 만들기.
		var histYMax=histFindMaxValue(histXMax,histXMain,diffHist);
		var histXDiff=parseInt(histXMax/5);//나중에 자동으로 잡아주기.
		var histYDiff=parseInt(histYMax/5);  
		
		var boxX = 3;	//[boxX]th column data
		var boxY = 4;	//[boxY]th column data
		var boxXLabel = labelArr[boxX];
		var boxYLabel = labelArr[boxY];
		var boxXMain =  mainArr[boxX];
		var boxYMain = mainArr[boxY];
		var boxXMax=findMaxValue(boxXMain,0); //나중에 max함수 추가해서 5단위로 잡게 만들기.
		var boxYMax=findMaxValue(boxYMain,0);
		var boxXDiff=parseInt(boxXMax/5);//나중에 자동으로 잡아주기.
		var boxYDiff=parseInt(boxYMax/6);
		
	</script>    
	
	<script>
	//	labelArr.length;
		var colWidth=100;
		document.write("<style>");
		document.write("table.selectedInfo { width: "+((colWidth+9)*(labelArr.length+1)-1)+"px; }");			
		document.write("div.scrollableContainer { width: "+ ((colWidth+9)*(labelArr.length+1)+15) +"px;}");
		document.write("div.scrollingArea { height: " + 300 + "px;}"); //you can set the height of scrolling area
		document.write("table.selectedInfo .node     div { width: "+colWidth+"px; text-align:center;  }");
		document.write("table.selectedInfo .column div { width: "+colWidth+"px; text-align:center;  }");

		document.write("</style>");
	</script>
	
	<script src="scatter.js"></script>
  	<script src="hist.js"></script>
 	<script src="box.js"></script>
 	
 	<div id="content">
	 	<h1>Table</h1>
	 	<script src="msg.js"></script>
 	</div>
 	
 	
 	<div id="left">
		<h1>Search</h1>
			<ul>
				<li><a href="#">How To Search</a></li>
				
			</ul>
 	
 		<script src="search.js"></script>		
	
		<p>
			<!--<form id="searchForm">  
			 	<input type="text"  id ="searchBox" name = "searchId"  placeholder="Please input boolean statement..."  onkeydown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {booleanSearch(searchForm);  printAns(); return false;}};"/>
				<input type="button" value="Clear" id="clearBtn" href="#" onClick ="clearSearchBox(); return false;"/>		
				<input type="button" value="Search" id="searchBtn" href="#" onClick ="booleanSearch(searchForm); printAns(); return false;"/>	
			</form> -->
			
			
			<form id="searchForm1">  
				<textarea rows="3" cols="20" id ="searchBox" name = "searchId"  placeholder="Please input boolean statement..."  onkeydown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {booleanSearch(searchForm1);  printAns(); return false;}};"></textarea>
				<a id="searchBtn" href="#" class="myButton" onClick ="booleanSearch(searchForm1); printAns(); return false;">Search</a>	
				<a id="clearBtn" href="#" class="myButton"  onClick ="clearSearchBox(); return false;">Clear</a>
			</form>  
		</p>
		<h1>Hide & Reset</h1>
		<p>
			<a id="nodeHide" href="#" class="myButton" onClick ="hideSelected(); return false;">Hide</a>
	<!-- <a id="nodeDelete" href="#" class="myButton" onClick ="deleteSelected(); return false;">Delete</a> -->		
			<a id="nodeReset" href="#" class="myButton" onClick ="resetSelected(); return false;">Reset</a>
		</p>		
		
		<h1>Other Functions</h1>			
			<p>
				<a id="showMsg" href="#" class="myButton" onClick =" return false;">Show Table</a>	
				<a id="hideMsg" href="#" class="myButton" onClick =" return false;">Hide Table</a>
			</p>	
			<p><a id="save" href="#" class="myButton" onClick =" return false;">Save as image</a></p>	
			<p><a id="sendImg" href="#" class="myButton" onClick =" return false;">Send an image to Email<br> (not supported yet)</a></p>	
			<p></p>	
		
		
		<!--<p><div id="msgContainer" class="myButton"></div></p>-->
 		
		<script src="event.js"></script>
	</div>
	
	
	
	
	
	
	
	<div id="footer">
		<div class="wrap">
				<div id="footnav">
					<ul>
						<li><a href="right_index.html">Home</a></li>
						<li><a href="about.html">About</a></li>
						<li><a href="#">Tutorial</a></li>
						<li><a href="#">Contact</a></li>
					</ul>
				</div>
				<div class="linksright">
					<h4><a href="#">Discover RIght</a></h4>
					<ul>
						<li><a href="#">Why RIGHT?</a></li>
						<li><a href="#">What Does RIGHT Do?</a></li>
						<li><a href="#">Who Uses RIGHT?</a></li>
						<li><a href="#">Demo Gallaery</a></li>
					</ul>
				</div>
				<div class="linksright">
					<h4><a href="#">About Us</a></h4>
					<ul>
						<li><a href="#">News</a></li>
						<li><a href="#">Contact Us</a></li>
					</ul>
				</div><div class="linksright">
					<h4><a href="#">Follow Us</a></h4>
					<ul>
						<li><a href="#">Twitter</a></li>
						<li><a href="#">Facebook</a></li>			
					</ul>
				</div>
				
				<div class="clearer">&nbsp;</div><br /><br />
				<p class="foot">
					Created by <a class="credit" href="#">RIGHT</a><br />
					&copy; RIGHT, R-Interactive-Graphics-via-HTml 2013.
				</p>
		</div>
	</div>
	
	
	
	<div id="divid" style="float:left;margin:20px auto auto 28px;width:250px; height:100px; background:#0809fe;"></div>
	<br style="clear:both" /><br/> Click to add the coordinates in this text field.<br/>
	<input type="text" name="regcoords" id="regcoords" />
	<div id="coords">Coords</div>
	
		<script src="divGetMousePos.js"></script>
		
	</body>
</html>